<template>
  <div class="home">
    <vMenu></vMenu>
    <vCalendar
      :months="months"
      @next="next"
      @prev="prev"
      :events="events"
      :lunar="lunar"
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :weeks="weeks"
    />
    <div class="top">
      <div class="item" :class="{active: tab===1}" @click="tab=1">
        <p>荟同交流日</p>
        <p>Parents Information Events</p>
      </div>
      <div class="item" :class="{active: tab===2}" @click="tab=2">
        <p>荟同开讲</p>
        <p>Parents Information Events</p>
      </div>
    </div>
    <ul class="event-list" v-if="list.length">
      <router-link to="/filed">
        <li class="item" v-for="(item, index) in list" :key="index" >
          <div class="date">
            <div class="month">{{item.month}}</div>
            <div class="day">{{item.day}}</div>
            <div class="week-cn">{{item.weekCn}}</div>
            <div class="week-en">{{item.weekEn}}</div>
          </div>
          <div class="content">
            <div class="title-cn">{{item.titleCn}}</div>
            <div class="title-en">{{item.titleEn}}</div>
            <div class="time">{{item.time}}</div>
          </div>
        </li>
      </router-link>
      <li class="item active" v-for="(item, index) in list" :key="index + 1">
        <div class="date">
          <div class="month">{{item.month}}</div>
          <div class="day">{{item.day}}</div>
          <div class="week-cn">{{item.weekCn}}</div>
          <div class="week-en">{{item.weekEn}}</div>
        </div>
        <div class="content">
          <div class="title-cn">{{item.titleCn}}</div>
          <div class="title-en">{{item.titleEn}}</div>
          <div class="time">{{item.time}}</div>
        </div>
      </li>
    </ul>
    <div class="no-events" v-else>
      <span>无活动</span>
      <span>No Events</span>
    </div>
    <!-- <vDialog></vDialog> -->
    <div class="more-info">
      <div>更多精彩活动请翻看日历</div>
      <div>For more events, please swipe the calendar</div>
    </div>
    <div class="dialoge">
    <div class="main">
      <div @click="openMask" class="text">
        <img src="/static/images/explain.png">
        <p>说明</p>
      </div>
    </div>
    <dialog-bar v-model="sendVal" type="danger" v-on:cancel="clickCancel()" dangerText="Delete"></dialog-bar>
  </div>
  </div>
</template>

<script>
import vCalendar from '@/components/calendar/mpvue-calendar'
import '@/components/calendar/browser-style.css'
import vMenu from './menu.vue'
import dialogBar from './Popup'

export default {
  components: {
    vCalendar,
    vMenu,
    'dialog-bar': dialogBar
  },
   data () {
    return {
      months: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      weeks: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
      disabledArray: ['2019-12-11','2019-12-11'],
      events: {'2019-12-13':'今日备注', '2019-12-17':'一条很长的明日备注'},
      lunar: false,
      tab: 1,
      list: [
        {
          month: 'Dec', 
          day: 13, 
          weekCn: '星期五', 
          weekEn: 'Friday', 
          titleCn: '荟同交流日 | 中小学场', 
          titleEn: 'Parents Information Events | For Lower', 
          time: '09:00 am - 11:00 am'
        }
      ],
      sendVal: false,
      title: '荟同交流日'
    }
  },
  methods: {
    prev(year, month, weekIndex) {
      console.log(year, month, weekIndex)
    },
    next(year, month, weekIndex) {
      console.log(year, month, weekIndex)
    },
    selectYear(year) {
      console.log(year)
    },
    selectMonth(month, year) {
      console.log(year, month)
    },
    setToday() {
      this.$refs.calendar.setToday()
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23)
      console.log(info);
    },
    renderer() {
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      console.log(val)
      console.log(val2)
    },
    openMask(index){
      this.sendVal = true;
    },
    clickCancel(){
      console.log('点击了取消');
    }
  }
}
</script>

<style lang="less">
.home{
  height: 30rem;
  .top{
    font-size: .4rem;
    border-top: 1px solid #ccc;
    display: flex;
    .item{
      flex: 1;
      border-bottom: 1px solid #ccc;
      padding: .4rem 0;
      height: 2rem;
      box-sizing: border-box;
      &.active{
        color: #de7a62;
        border-bottom: .1rem solid #de7a62;
      }
    }
  }
  .event-list{
    list-style: none;
    padding: .8rem;
    .item{
      width: 100%;
      height: 3.2rem;
      border: 1px solid #ccc;
      box-shadow: 4px 4px 15px #ccc;
      border-radius: 15px;
      display: flex;
      margin-bottom: .6rem;
      .date{
        flex-basis: 3.2rem;
        background-image:linear-gradient(141deg,#f9f2d6,#a4d09b);
        color: white;
        border-radius: 15px 0 0 15px;
        .month{
          font-size: .32rem;
          padding-top: .4rem; 
        }
        .day{
          font-size: 1rem;
        }
        .week-cn{
          padding-top: .2rem;
          font-size: .32rem;
        }
        .week-en{
          padding-top: .1rem;
          font-size: .32rem;
        }
      }
      .content{
        flex-grow: 1;
        text-align: left;
        padding: .4rem;
        .title-cn{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          font-size: .5rem;
          color: black;
        }
        .title-en{
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          padding-top: .2rem;
          font-size: .4rem;
          color: black;
        }
        .time{
          font-size: .48rem;
          padding-top: .4rem;
          color: #a4d09b;
        }
      }
      &.active{
        .date{
          background-image:linear-gradient(141deg,#eb9389,#ea6151);
        }
        .content{
          .time{
            color: #de7a62;
          }
        }
      }
    }
  }
  .no-events{
    font-size: .6rem;
    color: #ccc;
    padding-top: 2rem;
  }
  .more-info{
    font-size: .4rem;
    color: #ccc;
  }
  .dialoge{
    .main{
      position: fixed;
      top: 22rem;
      right: .7rem;
      width: 2rem;
      height: 2rem;
      background: #de7a62;
      font-size: .44rem;
      border-radius: 100%;
      color: white;
      img{
        width: .9rem;
        height: .84rem;
      }
      .text{
        margin-top: .2rem;
      }
    }
  }
}
</style>